<template>
  <view class="member">
    <view
      class="top"
      style="
        background-image: url('https://image.zkodoo.cc/25/03/08/808fae0eb6e94527a10f25d34bd442b5.jpg');
      "
    >
      <view
        class="navbar"
        :style="{
          paddingTop: safeAreaInsets.top + 'px',
          height: menuRect ? menuRect.height + 'px' : '0px',
        }"
      >
        <view class="title">我的</view>
      </view>
      <view class="member-top">
        <view class="member-left" @click="onJumpStore">
          <view class="avatar-box">
            <image
              v-if="storeInfo && storeInfo.store_image"
              class="avatar"
              :src="storeInfo.store_image"
              mode="aspectFill"
            ></image>
            <image
              v-else
              class="avatar"
              src="@/static/avatar.png"
              mode="aspectFill"
            ></image>
            <view class="shop-lable" v-if="storeInfo">普通门店</view>
          </view>
          <view class="member-shop-info" v-if="storeInfo">
            <view class="shop-name">{{ storeInfo.name }}</view>
            <view class="shop-phone">{{ storeInfo.contact_phone }}</view>
          </view>
          <view class="member-shop-info" v-else>
            <view class="shop-name"> 注册商户 </view>
          </view>
        </view>
        <view class="member-right" v-if="storeInfo" @click="onJumpStore">
          商户信息
          <up-icon name="arrow-right" size="13" color="#fff"></up-icon>
        </view>
      </view>
    </view>

    <view class="card-box">
      <view class="total-box">
        <view class="total-item" @click="toWallet">
          <view class="total-value">{{ userInfo.balance || "0" }}</view>
          <view class="total-name">余额</view>
        </view>
        <view class="total-item" @click="toCoupon">
          <view class="total-value">{{
            store.state.coupon.list.length || "0"
          }}</view>
          <view class="total-name">优惠券</view>
        </view>
        <view class="total-item" @click="handleToCollect">
          <view class="total-value">{{
            $store.state.goods.collectList.length
          }}</view>
          <view class="total-name">我的收藏</view>
        </view>
      </view>
    </view>
    <view class="card-box">
      <view class="tabs-list">
        <view class="tabs-item" @click="toOrderList">
          <image
            class="tabs-icon"
            src="@/static/images/icon/icon_dhd.png"
            mode="aspectFill"
          ></image>
          <view class="tabs-name">订货单</view>
        </view>
        <view class="tabs-item" @click="toDeliverList">
          <image
            class="tabs-icon"
            src="@/static/images/icon/icon_shdz.png"
            mode="aspectFill"
          ></image>
          <view class="tabs-name">收货地址</view>
        </view>
        <view class="tabs-item" @click="toAftercare">
          <image
            class="tabs-icon"
            src="@/static/images/icon/icon_sh.png"
            mode="aspectFill"
          ></image>
          <view class="tabs-name">售后/退货</view>
        </view>
        <view class="tabs-item" @click="handleToShop">
          <image
            class="tabs-icon"
            src="@/static/images/icon/icon_shop.png"
            mode="aspectFill"
          ></image>
          <view class="tabs-name">我的云店</view>
        </view>
      </view>
      <view class="other-info">
        <view class="other-info-item" @click="handleCall('sales')">
          <view class="other-info-key">业务员</view>
          <view class="other-info-val">
            <view class="phone">{{ salesPhone }}</view>
            <up-icon name="phone-fill" size="16" color="#222"></up-icon>
          </view>
        </view>
        <view class="other-info-item" @click="handleCall('customer')">
          <view class="other-info-key">客服</view>
          <view class="other-info-val">
            <view class="phone">{{ customerServicePhone }}</view>
            <up-icon name="phone-fill" size="16" color="#222"></up-icon>
          </view>
        </view>
      </view>
    </view>

    <view class="logout" v-if="$store.state.user.isLogin">
      <up-button
        type="error"
        shape="circle"
        text="退出登录"
        @click="onLogoutTap"
      ></up-button>
    </view>
    <my-tabbar current-page="/pages/index/member"></my-tabbar>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useStore } from "vuex";
import { canNextForStore, canLoginNext } from "@/util";

const store = useStore();

// 业务员号码
const salesPhone = ref("0898-6680-5263");

// 客服号码
const customerServicePhone = ref("400-8828-129");

function handleCall(type) {
  if (type == "sales") {
    uni.makePhoneCall({
      phoneNumber: salesPhone.value,
    });
    return;
  } else if (type == "customer") {
    uni.makePhoneCall({
      phoneNumber: customerServicePhone.value,
    });
    return;
  }
}

async function onJumpStore() {
  const result = await canLoginNext();
  if (result) {
    uni.navigateTo({
      url: "/pages/app/store",
    });
  }
}

function onLogoutTap() {
  uni.showModal({
    title: "提示",
    content: "是否确定退出登录？",
    success: function (res) {
      if (res.confirm) {
        store.dispatch("logout");
      }
    },
  });
}

async function handleToShop() {
  const result = await canNextForStore();
  console.log(storeInfo.value);
  if (result) {
    uni.navigateToMiniProgram({
      appId: "wx961996060de35cf5", // 填入目标小程序的 appId
      path: "pages/index/index?terminal_id=" + storeInfo.value.id, // 打开的页面路径，如果为空则打开首页
      extraData: {
        shop_id: 1,
      },
      success(res) {
        // 打开成功的回调
      },
      fail(err) {
        // 打开失败的回调
      },
    });
  }
}

async function toAftercare() {
  const result = await canNextForStore();
  if (result) {
    uni.navigateTo({
      url: "/pages/order/aftercare/list",
    });
  }
}

onMounted(() => {
  if (store.state.user.isLogin) {
    store.dispatch("fetchGetUserInfo");
    store.dispatch("fetchMerchtantsCurrent");
  }
});

const userInfo = computed(() => {
  return store.state.user.userInfo || "";
});
const storeInfo = computed(() => {
  return store.state.user.storeInfo || "";
});

function toWallet() {
  uni.navigateTo({
    url: "/pages/user/wallet/list",
  });
}

// 是否商户
function canStoreNext() {
  return new Promise((resolve, reject) => {
    if (store.state.user.isStore) {
      resolve(true);
    } else {
      uni.showModal({
        content: "当前账号暂无可用门店，请先注册门店。",
        cancelText: "我再看看",
        confirmColor: "#ff2b2b",
        confirmText: "立即注册",
        success: (result) => {
          if (result.confirm) {
            uni.navigateTo({
              url: "/pages/app/store",
            });
          }
          reject(false);
        },
      });
    }
  });
}

// 是否可进行下一步
async function canNext() {
  const loginNext = await canLoginNext();
  console.log(loginNext);
  if (!loginNext) return false;
  const storeNext = await canStoreNext();
  if (!storeNext) return false;
  return true;
}

async function handleToCollect() {
  const result = await canNextForStore();
  if (result) {
    uni.navigateTo({
      url: "/pages/user/collect",
    });
  }
}

async function toDeliverList() {
  const result = await canNextForStore();
  if (result) {
    uni.navigateTo({
      url: "/pages/user/deliver/list",
    });
  }
}

async function toOrderList() {
  const result = await canNextForStore();
  console.log(result);
  if (result) {
    uni.navigateTo({
      url: "/pages/order/list",
    });
  }
}

async function toCoupon() {
  const result = await canNextForStore();
  if (result) {
    uni.navigateTo({
      url: "/pages/user/coupon",
    });
  }
}

const { safeAreaInsets } = uni.getSystemInfoSync();

// #ifdef MP
const menuRect = uni.getMenuButtonBoundingClientRect();
// #endif

function handleToSupplier() {
  uni.navigateTo({
    url: "/pages/supplier/statistics",
  });
}

function handleToSupplierGoods() {
  uni.navigateTo({
    url: "/pages/supplier/goods",
  });
}
</script>

<style scoped lang="scss">
.member {
  .top {
    background-repeat: no-repeat;
    background-size: cover;
    .navbar {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 44px;
      .title {
        color: #fff;
        font-size: 32rpx;
      }
    }
    .member-top {
      padding: 20rpx 20rpx 40rpx;
      // background-color: #44bdf1;
      // background-color: #281e1d;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .member-left {
        display: flex;
        align-items: center;

        .avatar-box {
          position: relative;

          .avatar {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
          }

          .shop-lable {
            width: 110rpx;
            padding: 4rpx 0;
            text-align: center;
            font-size: 24rpx;
            color: #fff;
            background-color: chocolate;
            border-radius: 20rpx;
            position: absolute;
            bottom: -16rpx;
            left: 50%;
            transform: translateX(-50%);
          }
        }

        .member-shop-info {
          margin-left: 10rpx;
          .shop-name {
            font-size: 28rpx;
            font-weight: bold;
            color: #fff;
            margin-bottom: 6rpx;
          }

          .shop-phone {
            font-size: 24rpx;
            color: #fff;
          }
        }
      }

      .member-right {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 26rpx;
      }
    }
  }

  .card-box {
    margin: 20rpx;
    border-radius: 20rpx;
    background-color: #ffffff;

    .total-box {
      width: 100%;
      display: flex;
      align-items: center;

      .total-item {
        width: calc(100% / 3);
        text-align: center;
        padding: 20rpx;

        .total-value {
          font-size: 38rpx;
          font-weight: bold;
        }

        .total-name {
        }
      }
    }

    .tabs-list {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .tabs-item {
        padding: 20rpx;
        width: calc(100% / 5);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .tabs-icon {
          width: 60rpx;
          height: 60rpx;
          margin-bottom: 10rpx;
        }

        .tabs-name {
          font-size: 24rpx;
          color: #333333;
        }
      }
    }

    .other-info {
      padding: 0 20rpx;
      margin-top: 40rpx;

      .other-info-item {
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .other-info-key {
          font-size: 26rpx;
          color: #222;
          margin-right: 10rpx;
        }

        .other-info-val {
          display: flex;
          align-items: center;

          .phone {
            font-size: 26rpx;
            color: #222;
            margin-right: 10rpx;
          }
        }
      }

      .other-info-item {
        border-bottom: 2rpx solid #f0f0f0;
      }
    }
  }

  .logout {
    padding: 0 20rpx;
  }
}
</style>
